/* components/circle/circle.js */
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    bg: {            // 属性名
      type: String,   // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 'bg'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    draw: {
      type: String,
      value: 'draw'
    },
    step:{
      type:Number,
      value:0
    },
    max:{
      type:Number,
      value:3000
    },
    full:{
      type:Boolean,
      value:false
    },
  },

  data: { /*  私有数据，可用于模版渲染 */
    size: 50, /* 圆环盒子大小 size >= 2*x ( x 为canvas的绘制半径)*/
    step: 1,
    num: 100,
  },
  countTimer:null,
  is_full:false,
  detached:function(){
    console.log('销毁。。。。');
    clearInterval(this.countTimer);
  },
  methods: {
    init:function(){
      this.is_full = false;
      this.setData({
        full:false,
      });
    },
    toDetail:function(){
      wx.navigateTo({
        url:"/pages/me/myWallet/myWallet"
      });
    },
    setFull:function(){
      this.is_full = true;
      this.setData({
        full:true,
      });
      this.updateProgress(0);
    },
    /**
     * 步进
     */
    inc:function(step){
      this.updateProgress(step);
    },
    start:function(){
      // 设置倒计时 定时器 假设每隔100毫秒 count递增+1，当 count递增到两倍maxCount的时候刚好是一个圆环（ step 从0到2为一周），然后改变txt值并且清除定时器
      this.countTimer = setInterval(() => {
        let step = this.data.step += 100;
        this.updateProgress(step);
        this.triggerEvent('step',step);
      }, 1000);
    },
    stop:function(){
      clearInterval(this.countTimer);
    },
    updateProgress:function(step){
      this.data.step = step;
      if (this.data.step <= this.data.max) {
        // 绘制彩色圆环进度条
        this.drawCircle('circle_draw', 25, 3,(this.data.step / this.data.max) * 2);
      } else {
        this.setData({
          full:true
        });
        this.stop();
        if(this.is_full === false){
          this.is_full = true;
          this.triggerEvent('full');
        }
      }
    },
    drawCircle: function (id, x, w, step) {
      // 使用 wx.createContext 获取绘图上下文 context  绘制彩色进度条圆环
      let context = wx.createCanvasContext(id, this);
      // 设置渐变
      let gradient = context.createLinearGradient(2 * x, x, 0);
      gradient.addColorStop("0", "#FFB013");
      gradient.addColorStop("0.5", "#FFB013");
      gradient.addColorStop("1.0", "#FFB013");
      context.lineWidth = w;
      context.strokeStyle = gradient;
      context.lineCap = 'round';
      // context.setStrokeStyle(gradient);
      // context.setLineCap('round');
      context.beginPath();//开始一个新的路径
      // step 从0到2为一周
      context.arc(x, x, x - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke();//对当前路径进行描边
      context.draw()
    },
  },
});
